<template>
  <el-container>
      <el-header>
      <div style="float: right">
        <el-tooltip
          class="item"
          effect="dark"
          content="我的优坊"
          placement="bottom"
          open-delay="500"
        >
          <el-button
            plain
            icon="el-icon-user"
            circle
            style="border: none; width: 30px"
            @click="dialog = true"
          ></el-button>
        </el-tooltip>
        <el-drawer
          title="会员登陆"
          :before-close="handleClose"
          :visible.sync="dialog"
          direction="rtl"
          header
          custom-class="demo-drawer"
          ref="drawer"
        >
          <div class="demo-drawer__content">
            <div style="font-size: 20px; text-align: left; margin-left: 58px">
              <b>我已有一个账户</b>
            </div>
            <el-form>
              <el-form-item
                label=" "
                prop="username"
                :rules="[{ message: '账号还没有输入哦！', trigger: 'blur' }]"
              >
                <el-input
                  prefix-icon="el-icon-user-solid"
                  placeholder="请输入账号"
                  style="width: 75%"
                ></el-input>
              </el-form-item>
              <el-form-item
                label=" "
                prop="password"
                :rules="[{ message: '密码还没有输入哦！', trigger: 'blur' }]"
              >
                <el-input
                  type="password"
                  prefix-icon="el-icon-lock"
                  placeholder="请输入密码"
                  style="width: 75%"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-right" circle></el-button>
                <el-button
                  type="info"
                  icon="el-icon-refresh"
                  circle
                ></el-button>
              </el-form-item>
            </el-form>
          </div>
          <div
            style="
              height: 1px;
              background-color: lightgrey;
              margin-top: 50px;
              opacity: 0.4;
            "
          ></div>
          <div>
            <div style="font-size: 20px; text-align: left; margin-left: 58px">
              <b>加入到优坊，成为我们的一员</b>
            </div>
            <el-button
              type="primary"
              style="float: left; margin-left: 60px; margin-top: 20px"
              >创建优坊会员</el-button
            >
          </div>
        </el-drawer>
      </div>
      <div style="float: right">
        <el-tooltip
          class="item"
          effect="dark"
          content="我的购物袋"
          placement="bottom"
          open-delay="500"
        >
          <el-button
            plain
            icon="el-icon-goods"
            circle
            @click="cart = true"
            style="border: none"
          ></el-button>
        </el-tooltip>
        <el-drawer
          title="您的购物袋"
          :before-close="handleClose"
          :visible.sync="cart"
          direction="rtl"
          header
          custom-class="demo-drawer"
          ref="drawer"
        >
        </el-drawer>
      </div>
      <div class="head">
        <img style="width: 111.6px; height: 60px" src="../images/logo.jpg" />
        <div>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            style="display: inline-block; border: none"
          >
            <el-menu-item index="1" @click="table = true">精选</el-menu-item>
            <el-drawer
              title="精选"
              :visible.sync="table"
              direction="ttb"
              size="75%"
            >
              <div class="parent" style="height: 100%">
                <div style="float: left; flex: 1">
                  <el-cascader-panel
                    :options="options"
                    style="border: none"
                  ></el-cascader-panel>
                </div>
                <div style="float: left; flex: 1">
                  <el-image
                    style="margin-top: 15px; width: 90%; height: 85%"
                    src="https://team-shop-1303824460.cos.ap-beijing.myqcloud.com/shop-images/QQ%E5%9B%BE%E7%89%8720201006115403.png"
                  ></el-image>
                </div>
              </div>
            </el-drawer>
            <el-menu-item index="2" @click="table = true"
              >零食类型</el-menu-item
            >
            <el-menu-item index="3" @click="table = true"
              >新品尝鲜</el-menu-item
            >
          </el-menu>
        </div>
        <div style="float: right">
          <el-button
            plain
            icon="el-icon-search"
            circle
            style="border: none"
          ></el-button>
        </div>
        <div style="float: right">
          <el-input placeholder="搜索建议：中秋礼盒" v-model="input1">
          </el-input>
        </div>
      </div>
    </el-header>
    <div
      style="height: 1px; background-color: grey; margin-top: 6px; opacity: 0.4"
    ></div>
    <el-main>
        <div style="display:flex;height:100%" >
            <div style="flex:2;border-right:1px solid lightgrey">
                <div style="text-align:left;margin-left:60px;margin-top:40px;font-size:20px">
                    <b2>( •̀ ω •́ )✧ &nbsp;亲爱的{} 您的购买信息如下：</b2>
                </div>
                <div style="text-align:left;margin-left:130px;margin-top:60px">
                    <p>订单流水号： </p><br/>
                    <p>收货姓名：</p><br/>
                    <p>购买的商品：</p><br/>
                    <p>实付款：</p><br/>
                    <p>支付方式：</p><br/>
                    <p>创建时间：</p><br/>
                    <p>支付时间：</p><br/>
                    <p>发货时间：</p><br/>
                    <p>成交时间：</p><br/>
                </div>
                <div style="text-align:right;margin-right:60px;font-size:23px;margin-top:40px">
                    <b>
                        欢迎小主下次再来选购哦!(✿◡‿◡)
                    </b>
                </div>
            </div>
            <div style="flex:1;text-align:left;margin-left:30px;margin-top:50px">
                <div style="margin-top:100px;font-size:20px">
                    <b>购买成功！</b><br/>                    
                </div>
                <div style="margin-top:50px;font-size:18px">
                    我们会以最快的速度将包裹送到您的手中哦！ψ(｀∇´)ψ
                </div>
            </div>
        </div>
    </el-main>
    <el-footer>
      <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 6px;
          opacity: 0.4;
        "
      ></div>

      <div style="margin-left: 30px">优坊</div>
      <div
        style="
          height: 1px;
          background-color: grey;
          margin-top: 20px;
          opacity: 0.4;
        "
      ></div>
    </el-footer>
  </el-container>
</template>

<script>
export default {

}
</script>

<style>
.el-main {
  background-color: white;
  color: #333;
  text-align: center;
  height: 100%;
}
</style>